<template>
	<view class="header">
		<view class="container">

			<view class="swiper-container" v-if="swiperList.length > 0">
				<swiper 
					class="swiper" 
					:indicator-dots="swiperList.length > 1" 
					:autoplay="true" 
					:interval="3000" 
					:duration="1000"
					:circular="true"
				>
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image class="swiper-image" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 视频组件 -->
			<view class="video-container" v-if="content.videoUrl">
				<video 
					:src="content.videoUrl" 
					:controls="true" 
					:autoplay="false" 
					:loop="false" 
					:show-fullscreen-btn="true" 
					:show-play-btn="true" 
					:show-center-play-btn="true" 
					:enable-progress-gesture="true"
					class="video-player"
				></video>
			</view>

			<!-- 内容区域 -->
			<view class="content-container">
				<view class="description" v-html="content.description"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted
	} from 'vue';
import {
		passenger
	} from "@/api/index.js"
	
	// 轮播图数据
	const swiperList = ref([]);
	
	// 内容区域数据
	const content = ref({
		title: '胎盘文化博物馆',
		description: `
    <p>邯郸维生物科技有限公司积极拥抱新潮流，精心布局电商赛道，通过直播、短剧创作以及短视频拍摄等方式拓宽销售渠道，提升品牌影响力，推动公司销售持续发展。同时，与多家主流平台展开深度合作，保障直播内容的广泛传播，不断探索同各路达人携手的合作模式，以提高直播的曝光度和影响力。</p>
    <p>邯郸维生物科技有限公司是一家集生物制药、保健食品、化妆品、医疗器械、消毒剂研发、生产制造、销售为一体的现代高科技企业。公司拥有自主知识产权的国家专利多项，先后荣获“A级”研发中心、化学药品“A级”生产企业以及科技型、创新型中小企业等荣誉称号。公司多年来深耕于生物制药和胎盘研究，秉承着“研发生产特色产品、打造国际知名品牌”的愿景和战略目标，一心为实现产品价值、助力中国大健康事业发展拼搏奋进。</p>
  `,
	});

	// 返回上一级页面
	const goBack = () => {
		uni.navigateBack({
			delta: 1, // 返回上一级页面
		});
	};
	
	onShow(async () => {
		try {
			const res = await passenger.selectAllGuanShi();
			if (res.data && res.data.length > 0) {
				const data = res.data[0];
				content.value.title = data.title;
				content.value.description = data.description;
				content.value.videoUrl = data.shipin || '';
				
				// 处理轮播图数据
				const imagePath = data.imagePath;
				if (imagePath) {
					swiperList.value = imagePath.split(',');
				} else {
					swiperList.value = [];
				}
			} else {
				swiperList.value = [];
			}
			console.log('轮播图数据:', swiperList.value);
		} catch (error) {
			console.error('数据获取失败:', error);
			swiperList.value = [];
		}
	});
</script>

<style scoped>
	.container {
		padding: 20rpx;
		position: relative;
	}

	/* 返回按钮样式 */
	.back-button {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		z-index: 10;
	}

	.back-text {
		font-size: 32rpx;
		color: #333;
	}

	.swiper-container {
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.content-container {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.description {
		font-size: 28rpx;
		line-height: 1.6;
		color: #666;
	}

	.section image {
		width: 100%;
	}

	.history {
		position: relative;
	}

	.history-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: white;
	}

	.section-arrow {
		color: white;
	}

	.section-content {
		margin-top: 5px;
	}

	.section-description {
		font-size: 14px;
		color: white;
		line-height: 1.5;
	}

	.header {
		position: relative;
		width: 100%;
		height: 180px;
		background: linear-gradient(to bottom, #1c6ddc, #f2f4f7);
		padding-top: 20px;
		z-index: 10;
	}

	.title {
		color: white;
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 40rpx;
		width: 90%;
		text-align: center;
		height: 150rpx;
		line-height: 158rpx;
	}

	.container {
		padding: 0 20px;
	}

	.certificate {
		width: 100%;
	}
	.certificate image{
		width: 100%;
	}
	.banner {
		margin: 10px 0;
		border-radius: 20px;
		overflow: hidden;
		height: 419rpx;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.section {
		background-color: white;
		border-radius: 20px;
		margin-bottom: 20px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		height: 100px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.section-arrow {
		color: #666;
	}

	.section-content {
		margin-top: 5px;
	}

	.section-description {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.history {
		background: linear-gradient(to right, #007aff, #00aaff);
		background-image: url("https://aw2025ht.kangye.xyz/api/profile/upload/eB0SURyoRcfm.jpg");
		color: white;
	}

	.honor {
		background: linear-gradient(to right, #8B4513, #CD853F);
		color: white;
	}

	.team {
		background: linear-gradient(to right, #CD853F, #D2B48C);
		color: white;
	}

	.application {
		background: linear-gradient(to right, #007aff, #00aaff);
		color: white;
	}

	.section-group {
		display: flex;
		margin-bottom: 20px;
	}

	.honor {
		flex: 1;
		margin-right: 10px;
	}

	.section-right {
		display: flex;
		flex-direction: column;
	}

	.team,
	.application {
		flex: 1;
		margin-bottom: 10px;
	}
	
	/* 视频组件样式 */
	.video-container {
		width: 100%;
		height: 400rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #000;
	}
	
	.video-player {
		width: 100%;
		height: 100%;
	}
</style>